<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <el-menu 
        default-active="1" 
        class="el-menu-vertical-demo" 
        router
        :collapse="isCollapse"
      >
        <el-menu-item index="/dashboard">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>

        <el-menu-item index="/book-retail">
          <el-icon><ShoppingCart /></el-icon>
          <span>图书销售</span>
        </el-menu-item>

        <el-sub-menu index="inventory">
          <template #title>
            <el-icon><Box /></el-icon>
            <span>入库管理</span>
          </template>
          <el-menu-item index="/inventory-management/book-inventory">
            <el-icon><Reading /></el-icon>
            <span>图书入库</span>
          </el-menu-item>
          <el-menu-item index="/inventory-management/goods-inventory">
            <el-icon><Goods /></el-icon>
            <span>货品入库</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/dealer-management">
          <el-icon><User /></el-icon>
          <span>经销商管理</span>
        </el-menu-item>

        <el-sub-menu index="goods-management">
          <template #title>
            <el-icon><Goods /></el-icon>
            <span>商品管理</span>
          </template>
          <el-menu-item index="/goods-management/books">
            图书管理
          </el-menu-item>
          <el-menu-item index="/goods-management/goods">
            货品管理
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="orders">
          <template #title>
            <el-icon><Document /></el-icon>
            <span>订单管理</span>
          </template>
          <el-menu-item index="/purchase-orders">
            <el-icon><Sell /></el-icon>
            <span>进货订单</span>
          </el-menu-item>
          <el-menu-item index="/shipping-orders">
            <el-icon><ShoppingCart /></el-icon>
            <span>出货订单</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <!-- 主容器 -->
    <el-container>
      <!-- 顶部标题 -->
      <!-- <el-header>翰林书店图书销售系统</el-header> -->
      <!-- 主内容区 -->
      <el-main>
        <router-view v-slot="{ Component }">
          <component :is="Component" />
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
import {
  HomeFilled,
  ShoppingCart,
  Box,
  Reading,
  Goods,
  User,
  Document,
  Sell
} from '@element-plus/icons-vue'

const isCollapse = ref(false)

// ResizeObserver 防抖处理
const debounce = (fn, delay) => {
  let timer
  return (...args) => {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn(...args)
    }, delay)
  }
}

const _ResizeObserver = window.ResizeObserver
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 200)
    super(callback)
  }
}
</script>

<style scoped>
.el-container {
  height: 100vh;
}

.el-aside {
  /* background-color: #304156; */
  transition: width 0.3s;
}

.el-menu {
  border-right: none;
  /* background-color: #304156; */
}

.el-menu-item, .el-sub-menu__title {
  /* color: #bfcbd9; */
}

.el-menu-item:hover, .el-sub-menu__title:hover {
  /* color: #fff !important; */
  /* background-color: #263445 !important; */
}

.el-menu-item.is-active {
  color: #409EFF !important;
  /* background-color: #2d3b4e !important; */
}

.el-main {
  padding: 20px;
  background-color: #f0f2f5;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

/* 图标样式 */
.el-menu-item .el-icon, 
.el-sub-menu__title .el-icon {
  margin-right: 10px;
  width: 24px;
  text-align: center;
}

/* 子菜单样式 */
.el-menu--inline {
  /* background-color: #1f2d3d !important; */
}

.el-menu--inline .el-menu-item {
  padding-left: 54px !important;
}
</style>
